<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>modal</title>
    <link href="E:/Sublime/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    	.modal-content{
    		width: 678px;
    		height: 378px;
    	}
    	.modal-header{
    		height: 44px;
    		background-color: #EE1A24;
    		color: white;
    	}
    	.modal-body{
    		padding: 0;
    		margin-top: 38px;
    		margin-left: 38px;
    		margin-bottom: 20px;
    	}
    	.left{
    		border: 1px solid #e3e3e3;
    		border-left: none;
    		border-top: none;
    		border-bottom: none;
    	}
    	.input-group-addon:first-child{
    		border:none;
    	}
    	#user{
    		background-color: #EEEEEE;
    		border:none;
    	}
    	#password{
    		background-color: #EEEEEE;
    		border:none;
    	}
    	.form-group>.col-sm-offset-2{
			margin-left: 0;
    	}
		#find a{
			text-decoration: none;
			color: #676767;
			float: right;
		}
		.col-sm-offset-2>.btn{
			clear: both;
			float: right;
			background: #4B4B4B;
			color: white;
			height: 36px;
			width: 66px;
			border-radius: 0;
			border:none;
		}
		#footer ul{
			list-style: none;
			padding-left: 0;
		}
		#footer li{
			float: left;
			padding-right: 10px;
		}
		.clearfloat{
			overflow: hidden;
			clear: both;
		}
		.clearfloat li{
			padding-left: 10px;
			margin-right: 17px;
		}
		.col-md-6 button{
			margin-left: 66px;
			height: 43px;
			width: 158px;
			background-color: #D60000;
			color: white;
			border:none;
		}
		.col-md-6 p{
			margin: 35px;
			margin-top: 60px;
			color: #4B4B4B;
			font-size: 18px;
		}
    </style>
</head>
<body>
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">	Small modal</button>	

	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
	  <div class="modal-dialog modal-sm" role="document">
	    <div class="modal-content">
	     <div class="modal-content">

	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">用户注册</h4>
	      </div>

	      <div class="modal-body">
	        <!-- <p>One fine body&hellip;</p> -->
	        <div class="row">
	        	<div class="col-md-6 left">
	        		<form class="form-horizontal">
					  <div class="form-group">
					    <div class="col-sm-10">
					    	<div class="input-group">
      							<div class="input-group-addon">
      								<span class="glyphicon glyphicon-user"></span>
      							</div>
      							<input type="text" class="form-control" id="user" placeholder="邮箱/昵称/手机号">
      					    </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <div class="col-sm-10">
					    	<div class="input-group">
      							<div class="input-group-addon">
      								<span class="glyphicon glyphicon-lock"></span>
      							</div>
      							<input type="password" class="form-control" id="password" placeholder="登陆密码">
      					    </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <div class="col-sm-offset-2 col-sm-10">
					      <div id="find"><a href="#">找回密码</a></div>
					      <div class="checkbox">
					        <label>
					          <input type="checkbox">记住我的登录状态
					        </label>
					      </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <div class="col-sm-offset-2 col-sm-10">
					      <button type="submit" class="btn btn-default">登录</button>
					    </div>
					  </div>
					</form>
					<div id="footer">
						<ul>
							<li><img src="新浪.png" alt=""></li>
							<li><img src="QQ.png" alt=""></li>
							<li><img src="人人.png" alt=""></li>
						</ul>
						<ul class="clearfloat">
							<li>新浪</li>
							<li>QQ</li>
							<li>人人</li>
						</ul>
					</div>
					<!-- color: #4B4B4B;	 -->
	        	</div>

	        	<div class="col-md-6">
	        		<p>还未开通，赶快注册一个吧！</p>
	        		<button type="button">注册</button></div>
	        </div>
	      </div>

	 <!--      <div class="modal-footer">

	      </div> -->
	    </div>
	    </div>
	  </div>
	</div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="E:/Sublime/lib/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="E:/Sublime/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>	
</body>
</html>